<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <text class="header-title">景点浏览</text>
    </view>
    
    <!-- 景点轮播图 -->
    <view class="banner-slider">
      <swiper 
        class="swiper" 
        autoplay 
        interval="3000" 
        circular 
        indicator-dots 
        indicator-active-color="#fff"
        indicator-color="rgba(255, 255, 255, 0.5)"
      >
        <swiper-item v-for="(banner, index) in bannerList" :key="index">
          <view class="banner-item">
            <image :src="banner.imageUrl" mode="aspectFill" class="banner-image"></image>
            <view class="banner-title">{{ banner.title }}</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    
    <!-- 搜索框 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="search-icon">🔍</text>
        <input type="text" placeholder="搜索景点名称" v-model="searchKeyword" @input="handleSearch" />
      </view>
    </view>
    
    <!-- 景点列表 -->
    <view class="scenery-list">
      <view class="scenery-card" v-for="scenery in filteredSceneryList" :key="scenery.id" @click="viewSceneryDetail(scenery.id)">
        <image class="scenery-image" :src="'/static/' + scenery.coverImage" mode="aspectFill"></image>
        <view class="scenery-info">
          <text class="scenery-name">{{ scenery.name }}</text>
          <text class="scenery-desc">{{ scenery.description }}</text>
          <view class="scenery-price">
            <text class="price-symbol">¥</text>
            <text class="price-number">{{ scenery.basePrice }}</text>
            <text class="price-unit">起/人</text>
          </view>
          <view class="scenery-footer">
            <text class="scenery-status" :class="scenery.status === '上架' ? 'status-active' : 'status-inactive'">
              {{ scenery.status }}
            </text>
            <view class="book-btn">
              <text>查看详情</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore">
      <text>上拉加载更多</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      // 轮播图数据
      bannerList: [
        {
          title: '三坊七巷',
          imageUrl: '/static/scenery/sfqx.jpg'
        },
        {
          title: '鼓山风景区',
          imageUrl: '/static/scenery/gs.jpg'
        },
        {
          title: '西湖公园',
          imageUrl: '/static/scenery/xhgy.jpg'
        },
        {
          title: '茶亭街文化',
          imageUrl: '/static/scenery/czwh.png'
        },
        {
          title: '福道文化',
          imageUrl: '/static/scenery/fdwh.png'
        },
        {
          title: '镇海楼',
          imageUrl: '/static/scenery/zhl.png'
        }
      ],
      sceneryList: [
        {
          "id": 5,
          "name": "福州三坊七巷",
          "description": "福州历史文化街区，保存完好的明清建筑群，被誉为\"明清建筑博物馆\"",
          "coverImage": "logo.png",
          "basePrice": 60,
          "status": "上架"
        },
        {
          "id": 6,
          "name": "鼓山风景区",
          "description": "福州著名的风景区，自然风光秀丽，历史人文景观丰富",
          "coverImage": "logo.png",
          "basePrice": 40,
          "status": "上架"
        },
        {
          "id": 7,
          "name": "福州西湖公园",
          "description": "福州传统的城市公园，湖光山色，景色宜人",
          "coverImage": "logo.png",
          "basePrice": 0,
          "status": "上架"
        },
        {
          "id": 8,
          "name": "闽江公园",
          "description": "依江而建的现代化城市公园，是休闲散步的好去处",
          "coverImage": "logo.png",
          "basePrice": 0,
          "status": "上架"
        },
        {
          "id": 9,
          "name": "于山风景区",
          "description": "福州古城中心的小山，历史遗迹众多",
          "coverImage": "logo.png",
          "basePrice": 15,
          "status": "上架"
        }
      ],
      hasMore: false
    };
  },
  computed: {
    filteredSceneryList() {
      if (!this.searchKeyword) {
        return this.sceneryList;
      }
      return this.sceneryList.filter(item => 
        item.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
      );
    }
  },
  onLoad() {
    // 在实际应用中，这里可以调用API获取景点列表
    this.loadSceneryList();
  },
  methods: {
    loadSceneryList() {
      console.log('加载景点列表');
      // 模拟API调用
    },
    handleSearch() {
      console.log('搜索景点:', this.searchKeyword);
    },
    viewSceneryDetail(id) {
      console.log('查看景点详情，ID:', id);
      // 跳转到景点详情页
      uni.navigateTo({
        url: `/pages/scenery/sceneryDetail?id=${id}`
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  background-color: #1a5f7a;
  color: white;
  padding: 30rpx;
  text-align: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

/* 轮播图样式 */
.banner-slider {
  width: 100%;
  height: 400rpx;
  overflow: hidden;
}

.swiper {
  width: 100%;
  height: 100%;
}

.banner-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-title {
  position: absolute;
  bottom: 40rpx;
  left: 30rpx;
  color: white;
  font-size: 36rpx;
  font-weight: bold;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
  z-index: 5;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  padding: 20rpx 30rpx;
  margin-left: -30rpx;
  margin-bottom: -40rpx;
  width: 100%;
  box-sizing: border-box;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
}

/* 搜索框样式 */
.search-bar {
  padding: 20rpx;
  background-color: white;
}

.search-input {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 8rpx;
  padding: 0 20rpx;
  height: 70rpx;
}

.search-icon {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

.search-input input {
  flex: 1;
  font-size: 28rpx;
  background-color: transparent;
}

/* 景点列表样式 */
.scenery-list {
  padding: 20rpx;
}

.scenery-card {
  background-color: white;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
  border-left: 6rpx solid #3d8c9f;
}

.scenery-card:active {
  transform: scale(0.98);
}

.scenery-image {
  width: 100%;
  height: 300rpx;
  background-color: #f0f0f0;
}

.scenery-info {
  padding: 20rpx;
}

.scenery-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.scenery-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 15rpx;
}

.scenery-price {
  margin-bottom: 15rpx;
}

.price-symbol {
  font-size: 24rpx;
  color: #ff4d4f;
}

.price-number {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff4d4f;
}

.price-unit {
  font-size: 24rpx;
  color: #999;
  margin-left: 4rpx;
}

.scenery-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scenery-status {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 12rpx;
}

.status-active {
  color: #1a5f7a;
  background-color: #f6ffed;
  border: 1rpx solid #3d8c9f;
}

.status-inactive {
  color: #999;
  background-color: #f5f5f5;
  border: 1rpx solid #d9d9d9;
}

.book-btn {
  background-color: #3d8c9f;
  color: white;
  padding: 8rpx 24rpx;
  border-radius: 16rpx;
  font-size: 26rpx;
}

/* 加载更多样式 */
.load-more {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 28rpx;
}
</style>